<template>
	<view class="home">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="page">
			<view class="">
				<image src="../../static/images/bg04.png" mode="widthFix" style="width: 100%;height: 150rpx;"></image>
			</view>
			<view class="page_list">
				<view class="page_list_meun">
					<view class="page_list_title">待结算</view>
					<view class="page_list_view">
						<text class="page_list_text">￥</text>
						<text class="page_list_num">{{Info.djs}}</text>
					</view>
				</view>
				<view class="page_list_meun" @click="toPage(Info.ktx)">
					<view class="page_list_title">可提现 <image src="../../static/images/arrow03.png" style="width: 40rpx;height: 40rpx;margin-left: 10rpx;"></image></view>
					<view class="page_list_view">
						<text class="page_list_text">￥</text>
						<text class="page_list_num">{{Info.ktx}}</text>
					</view>
				</view>
				<view class="page_list_meun">
					<view class="page_list_title">累计收益</view>
					<view class="page_list_view">
						<text class="page_list_text">￥</text>
						<text class="page_list_num">{{Info.ljsy}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="module">
			<view class="">
				<view class="list_header">
					<view class="list_line"></view>
					<view class="list_title">投票帮代言人</view>
				</view>
				<view class="module_text">
					邀请好友成功发起有效投票，每100人投票，你可以获得2元奖励，例如投票人数达到2000人，你可获得40元奖励和额外任务达标奖励！
				</view>
				<view class="module_btn">立即邀请 <image src="../../static/images/arrow03.png" style="width: 45rpx;height: 45rpx;margin-left: 10rpx;"></image></view>
			</view>
			<view class="module_right">
				<image src="../../static/images/type07.png" mode="aspectFit" style="width: 100%;height: 300rpx;"></image>
			</view>
		</view>
		<view class="module">
			<view class="module_right">
				<image src="../../static/images/type08.png" mode="aspectFit" style="width: 100%;height: 300rpx;"></image>
			</view>
			<view class="" style="padding-left: 40rpx;">
				<view class="list_header">
					<view class="list_line"></view>
					<view class="list_title">推广规则</view>
				</view>
				<view class="module_text">
					锁定关系保持30天，锁定期内，粉丝发起的投票永久绑定到代言人名下，根据投票人数，代言人可获得相应的奖励。
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_header">
				<view class="list_line"></view>
				<view class="list_title">代言人成绩单</view>
			</view>
			<view class="list_bg">
				<block v-if="list.length > 0">
					<view class="list_meun" v-for="(item,index) in list" :key="index">
						<text class="list_meun_name">{{item.memo}}</text>
						<text class="list_meun_money">+{{item.money}}</text>
					</view>
				</block>
				
				<view class="empty_text" v-else>暂时没有任何数据~</view>
			</view>
		</view>
	</view>
</template>

<script>
import { spokespersonAPI,earningsListAPI } from '@/api/user';
export default {
	data() {
		return {
			title: '代言人',
			bgColor: '#1a96ff',
			list: [],
			Info:{}
		};
	},
	mounted() {
		
	},
	onLoad(options) {
		
	},
	onShow() {
		this.getData()
	},
	methods: {
		getData(){
			uni.showLoading({
				title:'加载中'
			})
			var parems = {
				token:uni.getStorageSync('accessToken')
			}
			spokespersonAPI(parems).then(res =>{
				if(res.code == 1){
					this.Info = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				uni.hideLoading()
			})
			earningsListAPI(parems).then(res =>{
				if(res.code == 1){
					this.list = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				uni.hideLoading()
			})
		},
		// 提现
		toPage(data){
			uni.navigateTo({
				url:'./withdraw?money=' + data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page{
	margin-top: 128rpx;
}
.home{
	overflow: hidden;
}
.page_list{
	position: absolute;
	top: 128rpx;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.page_list_meun{
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.page_list_title{
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}
	.page_list_text{
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
	}
	.page_list_num{
		font-size: 42rpx;
		color: #fff;
		font-weight: bold;
		margin-left: 10rpx;
	}
}

.module{
	padding: 0 30rpx;
	display: flex;
	align-items: center;
}
.module_text{
	font-size: 24rpx;
	line-height: 40rpx;
}
.module_right{
	width: 100%;
}
.module_btn{
	width: 240rpx;
	height: 75rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100rpx;
	background: #1a96ff;
	font-size: 28rpx;
	color: #fff;
	margin-top: 20rpx;
}
.list{
	padding: 0 30rpx 30rpx 30rpx;
}
.list_bg{
	box-shadow: 0 0px 24rpx 0 rgba(0,0,0,0.05);
	border-radius: 20rpx;
	width: 100%;
	min-height: 300rpx;
	background: #fff;
	padding: 10rpx 0;
}
.list_header{
	display: flex;
	align-items: center;
	margin: 24rpx 0;
}
.list_line{
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background:#1a96ff ;
}
.list_title{
	font-size: 28rpx;
	color: #303133;
	font-weight: bold;
	margin-left: 20rpx;
}
.list_meun{
	display: flex;
	justify-content: space-between;
	padding: 15rpx 30rpx;
	align-items: center;
}
.list_meun_name{
	font-size: 26rpx;
	color: #303133;
	font-weight: bold;
}
.list_meun_money{
	font-size: 28rpx;
	color: #303133;
	font-weight: bold;
}
.empty_text{
	font-size: 26rpx;
	color: #909399;
	width: 100%;
	min-height: 300rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
